var path = require('path');
module.exports = {
  mode: 'development',
  devtool: 'source-map',

  entry: {
    index: './src/index.js',
  },
  // context: path.resolve(__dirname, "src"), // 配置了 context，entry中的路径就可以省略src
  // externals: {
  //     jquery: "$",
  //     lodash: "_"
  // },

  // resolve 解析模块路径的时候的配置
  resolve: {
    // node 环境中 运行代码 遇到  require('jquery') 就会去 node_modules 中找 jquery

    modules: ['node_modules'], //默认值  webpack 遇到 没有路径的模块 就会去 node_modules 中找 这是根据 ast 语法树 解析出来的 不是运行出来的
    // webpack 打包是不会运行代码的
    extensions: ['.js', '.json'], //默认值  当 路径没有后缀的时候 会去 找 后缀名  先找 .js 再找 .json
    alias: {
      // 别名  可以 简化路径 @就 代表 到 src 目录下
      '@': path.resolve(__dirname, 'src'),
      _: __dirname, // 别名_ 代表的是 当前webpack.config.js所在的目录
    },
  },
  // 解析模块的配置
  module: {
    // 模块解析规则
    rules: [],
    // 前提条件是 一个 单模块 是一个被打包好的 结果
    noParse: /jquery/, // 正则表达 不对 jquery进行 任何操作  直接将 jquery 的源代码 放入到 打包的结果中 也不会解析里面的依赖了
    //因为 jquery 是已经打包好了的 所以不需要对他进行 任务操作了
  },
  stats: {
    colors: true,
    modules: false,
    hash: false,
    builtAt: false,
  },
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    library: 'abc', // 就是打包结果是一个 立即执行函数 然后把立即执行函数的结果 返回给abc 变量  一般是 得到了 入口文件的 结果
    // 类似JQUERY 暴露 $
    libraryTarget: 'window', //  abc 暴露给 window.abc
    target: 'web', //  打包的目标环境 就是 你 配置的是 web 但 你代码里面 require 了 node 模块  就会报错
  },
};
